<script setup>
import { artGetChannelsService } from '@/api/article.js'
import { ref } from 'vue'

defineProps({
  /*
  <!-- 
modelValue：用于接收父组件传递的选中的分类 id。
width：用于设置选择框的宽度。
使用 defineEmits 定义了一个事件 update:modelValue，用于向父组件通知选择框的值变化。 -->
*/ 
  modelValue: {
    type: [Number, String]
  },
  width: {
    type: String
  }
})
const emit = defineEmits(['update:modelValue'])
/*
<!-- 
使用 ref 定义了 channelList 变量，用于存储从后台获取的文章分类列表。
getChannelList 方法通过调用 artGetChannelsService() 异步获取文章分类数据，并将结果存储在 channelList 中。 -->*/ 
const channelList = ref([])
const getChannelList = async () => {
  const res = await artGetChannelsService()
  channelList.value = res.data.data
}
getChannelList()
</script>

<template>
  <!-- label 展示给用户看的，value 收集起来提交给后台的 -->
   
<!-- <template> 部分使用了 Element Plus 的 el-select 组件来展示选择框，可以选择文章分类。
:modelValue="modelValue" 和 @update:modelValue="emit('update:modelValue', $event)" 实现了选择框值与父组件数据的双向绑定，确保选择框选中值的同步更新。
使用 v-for 遍历 channelList，为每个文章分类渲染一个 el-option 选项，展示分类名称，并将分类 id 作为其值。 -->
  <el-select
    :modelValue="modelValue"
    @update:modelValue="emit('update:modelValue', $event)"
    :style="{ width }"
  >

    <el-option
      v-for="channel in channelList"
      :key="channel.id"
      :label="channel.cate_name"
      :value="channel.id"
    ></el-option>
  </el-select>
</template>
